/* Navigation CSS Document */
/*******************************************************************************

    Sections
    1. Sticky Header
      1.1. topNav
      1.2 productNav (mega menu)

    2. Sticky Footer


1. STICKY HEADER 
*******************************************************************************/

/*1.1. topNav*/
ul.topNav li, ul.productNav li{
	.inlineLi;
}
	ul.topNav{
		.featurefont;
		text-transform:uppercase;
        font-size:.8em;
	}
		ul.topNav>li:first-child{margin-left:-20px !important;}
		ul.topNav li a{text-decoration:none;}
		.productname a {color:#666666;text-decoration: none;}
		ul.topNav li.login, ul.topNav li.product_finder{
			height:40px;
			line-height:40px;
			margin:0;
		}

        ul.topNav li.login a,    
        ul.topNav li.product_finder a{padding:12px 10px 5px; margin-top:-2px;}
		
		 ul.topNav li.promoText{
			 .gradient (top, #F00, #8C0000);
			 color:#fff; 
			 margin-top:0px;
			 padding: 15px 10px 5px;
			 .rounded_bottom(5px);
			 width:220px;
			 a{color:#fff;}
			 font-size:11px;
		}
		
        ul.topNav li.login{}
			ul.topNav li.login a{
				font-weight:bold;
				.rounded_bottom(5px);
				color:@gray;
			}
            
		/*search container and styles*/	
		ul.topNav li.search{float:right;}
		ul.topNav li.search input[type="text"]{
			font-size:1em;
            text-indent:10px;
			background-color:#eee;
            margin:5px;
			height:27px;
            width:120px;
			.transition(all, 0.5s, ease-in);
		}
		ul.topNav li.search input[type="text"]:hover,
		ul.topNav li.search input[type="text"]:focus{
			background-color:#fff;
            width:130px;
			.transition(all, 0.5s, ease-in);	
		}
		ul.topNav li.search input[type="text"]:after {
			content: "\e04c";
			width:20px;
			height:20px;
			color:#000;
			display: inline-block;
		}
		
        .search input[type="submit"]{
			display:none;
		}


		
 /*1.2. productNav*/		
.megamenuContainer{
	background:@base;
	.inset-box-shadow(2px 2px 6px, 0.5);
	.roundcorners(0px, 0px, 20px, 0px);
	display:block;
}

ul.productNav{
	height:40px;
	position:relative;
	margin:0;
	padding:0;
}
	ul.productNav>li {
		display:block; 
		float:left;
		height:40px;
		line-height:40px;
		margin:0;
		padding:0;
	}
	ul.productNav li.active{
		background:@orange;
	}
	ul.productNav li>a{
		display:block;
		margin:1px 0 0 0;
		.one;
        padding:0 15px 3px;
		font-weight:bold;
		text-decoration:none;
		.featurefont;
		height:39px;
		line-height:40px;
		text-align:center;
		.transition(all, 0.2s, ease-in);
		font-size:1.2em;
		color:@white;
	}
	ul.productNav>li>a:hover{
		.transition(all, 0.2s, ease-in);
		.roundcorners(10px, 10px, 0px, 0px);
	}
	ul.productNav>li>a.active{
		background:#fff;
		color:@orange;
		.roundcorners(10px, 10px, 0px, 0px);
		/*.box-shadow(0px, 0px, 5px, 0.5);*/
		position:relative;
		z-index:999;
	}
	
		ul.productNav .megamenu{
			display:none;
			position:absolute;
			top:34px;
			left:1px;
			background:#fff;
			.rounded;
			padding:10px;
			.box-shadow(0px, 0px, 5px, 0.8);
            z-index:106;
		}
		ul.productNav .megamenu div{}
		ul.productNav .megamenu ul ul{
			float:none;
			margin:0;
		}
			ul.productNav .megamenu ul {
				li{
				a{
					float:none;
					background:none;
					border:none;
					width:100%;
					height:auto;
					padding:2px 5px;
					margin:0;
					line-height:1.5em;
					text-align:left;
					font-size:.90em;
					color:#999;
					font-weight:normal;
					.standardfont;

					&:hover{
						background:@base;
						color:#fff;
					}
					
					h3{
						display:block;
						font-size:1.5em;
						padding:0 !important;
						margin:0 !important;
						line-height:normal;
						text-transform:uppercase;
						.featurefont;
						&:hover{
							background:@base;
							color:#fff;
						}
					}
				}
			}	
		}
			
		ul.productNav .megamenu .brands{
			/*background:#eee;*/
			padding:5px;
			height:100%;
			margin-right:10px;
			margin-left:10px;
			margin-bottom:10px;
			line-height:1em;
			width:16% !important;
		
			ul{
				margin:0 auto; 
				padding:5px 0;
		
				li{
					display:block; 
					margin-top:5px; 
					padding:0 5px; 
					text-align:center;
					
					a{
						margin:0 auto; 
						padding:0;
					}
				}
			}
			a.btn{
				/*font-size:14px;*/
				width:100%;
				line-height:normal;
				text-align:center;
			}
			h3{
				margin-top:5px;
				text-align:center;
				font-size:14px;
			}
		}
		
		ul.productNav .megamenu .menuList{
			ul{margin-bottom:5px;}
			&.col{
				max-width:140px; 
				float:left; 
				margin:0 10px;
			}
			li{
				display:block;
				
				h3{
					color:@orange; 
				}
			}
		}
		
		ul.productNav .megamenu .tableStyle{
				display:table !important;
			
		 	.adSpace{
				border-top:1px solid #ccc;
				display:table-cell !important;
				vertical-align:middle;
				margin:0 auto;
				width:100%;
			
			}
		}
		
        .megamenu h3 {
            text-transform:uppercase;
            color:grey;
            font-size:18px;
            font-family: 'RobotoBold';
            margin: 0px;
        }

        ul.productNav .row {
            margin-left:0px;
    
        }
		
        .featured-name {
            text-transform:uppercase;
            line-height: 20px;

        }

           .featured-price {
            color:red;
            font-weight:bold;
        }

        .brands a {
            text-transform: uppercase;
            font-family: 'RobotoBold';
            /*color: #006600;*/
            font-weight: bold;
            font-size: 12px;
            padding: 0px 5px;
			
			&.btn.green{
				.white;
				padding:10px 5px;
			}

        }

		
/*******************************************************************************
2 STICKY FOOTER 
*******************************************************************************/
footer.stickyfooter{
	display:table;
	
	ul{
		display:table-cell;
		list-style:none;
		padding:0;
        border-spacing:1px;
         .featurefont;
		 
		li{
			vertical-align:middle;
			display:table-cell;
			height:40px;
			margin:0;
			padding:5px;
			font-size:1.1em;
			color:#999;
			
			>a{
				color:#ccc; 
				text-decoration:none; 
				padding:5px 10px;
				
				&:hover{
					background-color:#333;
					.transition(all, 0.5s, ease-in);
					color:#fff; text-decoration:none;
				}
			}
			
		}
        
	}
    
}
        ul.company_nav{
            li{height:20px; line-height:20px;}
        }
	
ul.socialmedia {
	li{
		.display-inline-block; 
		margin:10px 0; 
		border-spacing:0;
		
		a{
			display:block; 
			color:#999 !important;
			.rounded(5px);
			.transition(all, 0.5s, ease-in);
			font-size:1.4em;
			padding:0px !important;
			
			&:hover{
				color:#fff !important; 
				.transition(all, 0.5s, ease-in); 
				background:none !important;
			}
		}
	}
}